<!DOCTYPE html>
<html lang="zh_CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>加密与解密</title>

    <!-- CSS -->
    <link th:href="@{/static/css/bootstrap.min.css}" type="text/css" rel="stylesheet"/>
    <style>
        body {
            padding-top: 70px;
            padding-bottom: 30px;
        }

        .theme-dropdown .dropdown-menu {
            display: block;
            position: static;
            margin-bottom: 20px;
        }

        .theme-showcase > p > .btn {
            margin: 5px 0;
        }


        .pagingFrom > li > a, .pagingFrom > li > span {
            color: #000000;
        }

        .pagingFrom > li > .paging {
            color: #428BCA;
        }

        .pagingFrom > .paging-input {
            background-color: #FFFFFF;
            border: 1px solid #DDDDDD;
            float: left;
            line-height: 1.42857;
            margin-left: -1px;
            padding: 6px 12px;
            position: relative;
            text-decoration: none;
            border-width: 0px;
        }

        .input-mini-s {
            width: 30px;
            background-color: transparent;
            border-color: #000000;
            border-right: 1px solid #B7D8EE;
            border-style: solid;
            border-width: 0 0 1px;
            color: #0061DE;
            text-align: center;
            margin: 0 3px;
        }


        .col-sm-0 {
            width: 1%;
        }

        .col-sm-01 {
            width: 5%;
        }

        .error-msg {
            color: red;
            font-size: 90%;
            display: block;
            margin-bottom: 8px;
            white-space: nowrap;
            font-weight: bold;
        }

        .border1 {
            border: 1px solid red;
        }

        .border2 {
            border: 1px solid #000000;
        }
    </style>

</head>
<body>
<div id="wrap">
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">加解密示例</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a th:href="@{/index}">首页</a>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">加密与解密
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="active">
                                <a th:href="@{/secret/index}">加密与解密</a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <!--<ul class="nav navbar-nav navbar-right">-->
                <!--    <li class="dropdown">-->
                <!--        <a href="#" class="dropdown-toggle" data-toggle="dropdown">User-->
                <!--            <b class="caret"></b>-->
                <!--        </a>-->
                <!--    </li>-->
                <!--</ul>-->
            </div>

        </div>
    </div>

    <div class="container">
        <div id="content">
            <div class="container">
                <div class="well">
                    <form action="" method="post" id="uploadForm" enctype="multipart/form-data" target="downloadIframe"
                          accept=".txt">
                        <div class="form-group">
                            <img id="loading" th:src="@{/static/images/loading.gif}" style="display:none;"/>
                            <input type="file" id="uploadFile" name="uploadFile"/>
                            <p class="help-inline">
                                <b>请选择要处理的txt文件，txt里面每行只有一个明文号码 或 密文号码!</b>
                            </p>
                        </div>
                        <div class="form-group">
                            <div class="radio disabled">
                                <label>
                                    <input type="radio" name="secretStrategy" value="RSA">
                                    RSA加解密
                                </label>
                            </div>
                            <div class="radio disabled">
                                <label>
                                    <input type="radio" name="secretStrategy" value="DES">
                                    DES加解密
                                </label>
                            </div>
                            <div class="radio disabled">
                                <label>
                                    <input type="radio" name="secretStrategy" value="DESede">
                                    DESede加解密
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-info upload-btn" data-secret-type="encrypt">
                                加密
                            </button>
                            <button type="button" class="btn btn-info upload-btn" data-secret-type="decrypt">
                                解密
                            </button>
                        </div>
                    </form>
                </div>
                <div class="well">
                    <form action="" id="textForm">
                        <div class="form-group">
                            <input type="text" class="form-control" id="textString" name="textString">
                            <p class="help-inline">
                                <b>请输入明文号码 或 密文号码!</b>
                            </p>
                        </div>
                        <div class="form-group">
                            <div class="radio disabled">
                                <label>
                                    <input type="radio" name="secretStrategy" value="RSA">
                                    RSA加解密
                                </label>
                            </div>
                            <div class="radio disabled">
                                <label>
                                    <input type="radio" name="secretStrategy" value="DES">
                                    DES加解密
                                </label>
                            </div>
                            <div class="radio disabled">
                                <label>
                                    <input type="radio" name="secretStrategy" value="DESede">
                                    DESede加解密
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-info textBox-btn" data-secret-type="encrypt">
                                加密
                            </button>
                            <button type="button" class="btn btn-info textBox-btn" data-secret-type="decrypt">
                                解密
                            </button>
                        </div>
                        <div class="form-group hide" id="showTextBox">
                            <textarea class="form-control" rows="3" id="textBox"></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div class="container">
        <p class="text-center text-muted credit">
            -2022 © 胡桃夹子
        </p>
    </div>
</div>
<iframe name="downloadIframe" style="display: none;"></iframe>
<script th:src="@{/static/js/jquery.1.12.4.min.js}" type="text/javascript"></script>
<script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/static/js/jquery.blockUI.js}" type="text/javascript"></script>
<script th:inline="javascript">
    var context = [[${application.ctx}]];

    var downloadResult = null;

    /**
     * 循环监听是否下载结束
     */
    function listenEnd(ele) {
        console.log("listenEnd")
        var loop = setInterval(function () {
            if (downloadResult == "1") {
                clearInterval(loop);
                $(ele).removeClass("submit-ing");
                $.unblockUI();
            } else if (downloadResult != null) {
                clearInterval(loop);
                $(ele).removeClass("submit-ing");
                $.unblockUI();
                alert(downloadResult)
            } else {
                getFlag();
            }
        }, 1500);
    }

    /**
     *获取标识
     */
    function getFlag() {
        $.ajax({
            url: context + '/secret/getEndFlag',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                console.log(res.flag)
                downloadResult = res.flag;
            }
        })
    }


    $(function () {

        /**
         * 文本文件内容上传，批量操作
         */
        $(".upload-btn").click(function () {
            let $btn = $(this);
            if ($btn.hasClass("submit-ing")) {
                alert("请不要重复操作！")
                return;
            }
            $btn.addClass("submit-ing");

            $.blockUI({message: '<h1>正在处理中，请稍后......</h1>'});

            let secretStrategy = $("#uploadForm input[name='secretStrategy']:checked").val();
            let secretType = $(this).attr("data-secret-type");
            let url = context + "/secret/batchExecute/" + secretType + "/" + secretStrategy + "?v=" + Date.now()
            $("#uploadForm").attr("action", url);
            $("#uploadForm").submit();

            listenEnd($btn);
        });

        /**
         * 单条数据加密或解密操作
         */
        $(".textBox-btn").click(function () {
            let textString = $.trim($("#textString").val());
            if (!textString) {
                alert("请输入要加密或解密的文本内容！");
                return;
            }

            let $btn = $(this);
            if ($btn.hasClass("submit-ing")) {
                alert("请不要重复操作！")
                return;
            }
            $btn.addClass("submit-ing");

            $("#textBox").empty();

            let secretStrategy = $("#textForm input[name='secretStrategy']:checked").val();
            let secretType = $(this).attr("data-secret-type");
            let url = context + "/secret/execute/" + secretType + "/" + secretStrategy + "?v=" + Date.now()
            $.ajax({
                type: "POST",
                url: url,
                data: {'textString': textString},
                datatype: "json",
                success: function (data) {
                    $("#showTextBox").removeClass("hide");
                    $("#textBox").val(data);
                    $btn.removeClass("submit-ing");
                },
                error: function (data, status, e) {
                    $btn.removeClass("submit-ing");
                }
            });

        });

        $(".textBox-clean-btn").click(function () {
            $("#textString").val("");
            $("#showTextBox").addClass("hide");
            $("#textBox").val("");
        });
    });
</script>

</body>
</html>
